<template>
  <div class="cont">
    <n-grid cols="1 800:10">
      <n-grid-item span="7">
        <n-card title="news" class="news">
          <!-- 滚动条 -->
          <n-scrollbar class="a" style="height: 200px">
            <!-- 新闻列表 -->
            <n-list>
              <n-list-item>
                <n-image
                  width="50"
                  src="人生嘛，失败总是难免的"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                  深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                  开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                  痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                  孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪
                </n-ellipsis>
              </n-list-item>
              <n-list-item>
                <n-image
                  width="50"
                  src="人生嘛，失败总是难免的"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                  深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                  开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                  痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                  孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪
                </n-ellipsis>
              </n-list-item>
              <n-list-item>
                <n-image
                  width="50"
                  src="人生嘛，失败总是难免的"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                  深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                  开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                  痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                  孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪
                </n-ellipsis>
              </n-list-item>
              <n-list-item>
                <n-image
                  width="50"
                  src="人生嘛，失败总是难免的"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                  深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                  开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                  痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                  孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                  住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                  停滞的海浪
                </n-ellipsis>
              </n-list-item>
            </n-list>
            <!-- 新闻列表end -->
          </n-scrollbar>
          <!-- 滚动end -->
        </n-card>
      </n-grid-item>

      <n-grid-item span="3">
           <n-card title="notice" class="notice">
            <!-- 滚动条 -->
            <n-scrollbar class="b" style="height: 200px">
            <!-- 公告列表 -->
            <n-list>
                <n-list-item>
                <n-image
                    width="50"
                    src="人生嘛，失败总是难免的"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                    深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                    开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                    痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                    孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪
                </n-ellipsis>
                </n-list-item>
                <n-list-item>
                <n-image
                    width="50"
                    src="人生嘛，失败总是难免的"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                    深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                    开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                    痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                    孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪
                </n-ellipsis>
                </n-list-item>
                <n-list-item>
                <n-image
                    width="50"
                    src="人生嘛，失败总是难免的"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                    深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                    开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                    痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                    孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪
                </n-ellipsis>
                </n-list-item>
                <n-list-item>
                <n-image
                    width="50"
                    src="人生嘛，失败总是难免的"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                />
                <n-ellipsis style="max-width: 80%; height: 50px" line-clamp="2">
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦
                    深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪 痛苦之王
                    开始厌倦 深海的光 停滞的海浪 住在我心里孤独的 孤独的海怪
                    痛苦之王 开始厌倦 深海的光 停滞的海浪 住在我心里孤独的
                    孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
                    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光
                    停滞的海浪
                </n-ellipsis>
                </n-list-item>
            </n-list>
            <!-- 公告列表end -->
            </n-scrollbar>
            <!-- 滚动end -->
            </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script>
import { onMounted, ref, h } from "vue";
import { NIcon } from "naive-ui";
import {
  GameController,
  Airplane,
  FlashOutline,
  Cash,
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
} from "@vicons/ionicons5";

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const vv = ref(11);
export default {
  name: "Home",
  components: {
    GameController,
    Airplane,
    FlashOutline,
    Cash,
  },
  setup() {
    console.log("head测试");
    onMounted(() => {});
    return {
      vv,
    };
  },
};
</script>

<style>
.cont {
  /* width: 60%; */
  margin: 0 auto;
}
.a {
  /* background: rgb(223, 128, 168); */
}
.news{
    margin: 0 auto;
    /* width: 90%; */
}
.notice{
      margin: 0 auto;
    /* width: 90%; */
}
.a .n-list {
  margin: 0;
}
.a .n-list-item {
  height: 90px;
}
.b {
  /* background: rgb(79, 201, 105); */
}
.b .n-list {
  margin: 0;
}
.b .n-list-item {
  height: 90px;
}
</style>